<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>服务记录</title>
<script src="assets/js/iscrollEvent.js"></script>
<style>
    html,
    body{
      height: 100%;
    }
</style>
<script type="text/javascript">
	var app = new EventsList(null, {
		api : '${ctx}/weixin/employee/serviceRecordPage',
		isClick: true,
		params : {
			page : 1,
			vipId : '${vipId}',
			no_record :'您当前还没有消费哦'
		}
	}, initData);
	app.init();

	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);

	function initData(data, type, $list) {
		if (data.rows) {
			var monthTemp = $.trim($("#month_temp").html());
			var recordTemp = $.trim($("#record_temp").html());
			//jquery解析map数据
			$.each(data.rows, function(j, detail) {
				var monthDivId = 'month-' + detail.month;
				var $monthDiv = $list.find('#' + monthDivId);
				if ($monthDiv.length == 0) {
					$list.append(Comm.format(monthTemp, monthDivId, detail.month.substring(2)));
				}
				var $recordDiv = $list.find('#' + monthDivId).find(
						'.app-month-r');
				//解析数组
				$.each(detail.list, function(i, item) {
					$record = $(Comm.format(recordTemp, item.creDateStr,
							item.shopName, item.serviceNames,
							item.employeeNames, item.mdseNames))
					$recordDiv.append($record);
					$record.find('a.am-fr').on('click',function() {
						recordDetail(item.orderInfoId);
					});
				});
			});
		}
	}
	
	var $modal = $('#doc-modal');
	var $panelDiv=$("#oper-explain");
	function recordDetail(orderInfoId) {
		//var $panelDiv=$("#oper-explain");
		var $ul=$modal.find(".am-thumbnails");
		$panelDiv.empty();
		$ul.empty();
		$.ajax({
			type : 'GET',
			url: "${ctx}/weixin/employee/hairdoRecord/"+orderInfoId,
			dataType: "json",
			success: function (data) {
				$panelDiv.html(data.operExplain);
				if(data.imgList){
					$.each(data.imgList, function(i, item) {
						$ul.append("<li><img class='am-thumbnail' src='"+item.img+"' /></li>");
					});
				}
				$modal.modal();
			}
		});
	}
</script>
</head>
<body>
	<div id="wrapper" data-am-widget="list_news"
		class="am-list-news am-list-news-default">
		<div class="am-list-news-bd">
			<div class="pull-action loading" id="pull-down">
				<span class="am-icon-arrow-down pull-label" id="pull-down-label">
					下拉刷新</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
			<div class="am-list" id="record-list">
				<div class="am-list-item-text">正在加载内容...</div>
			</div>
			<div class="pull-action" id="pull-up">
				<span class="am-icon-arrow-down pull-label" id="pull-up-label">
					上拉加载更多</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
		</div>
	</div>
	<div style="display: none" id="month_temp">
		<div class="app-month-con" id="{0}">
			<div class="app-month-l">
				<div class="app-month-num">{1}月</div>
			</div>
			<div class="app-month-r"></div>
		</div>
	</div>
	<div style="display: none" id="record_temp">
		<div class="am-panel am-panel-landiao am-text-sm">
			<div class="am-panel-hd am-text-bold">{0} - {1}</div>
			<div class="am-panel-bd">
				<span class="am-block">美发项目：{2}</span> 
				<span class="am-block">服务人员：{3}</span>
				<span class="am-block am-cf"><span class="am-fl">购买项目：{4}</span>
				<a class="am-fr" href="javascript:void(0)">详情</a></span>
			</div>
		</div>
	</div>
	 <div class="am-modal am-modal-landiao am-modal-no-btn" tabindex="-1" id="doc-modal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">详情<a href="javascript:void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a> </div>
			<div class="am-modal-bd am-text-left">
				<div class="am-panel am-panel-default am-text-sm">
					<div class="am-panel-bd" id="oper-explain"></div>
				</div><!-- 使用软发剂定性剂<br>白发比例0%<br><br>操作说明<br>1、烫发剂 2、烫发杠 3、烫发棉纸 4、梳子 5、围布 6、红外线或蒸汽焗油机 7、定性剂 -->
				<ul class="am-avg-sm-3 am-thumbnails">
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
